// SPDX-FileCopyrightText: © 2024 Olivier Meunier <olivier@neokraft.net>
//
// SPDX-License-Identifier: AGPL-3.0-only

// This file defines all Readeck's colors.

@layer base
  :root
    --color-white: rgb-values(#fff)
    --color-black: rgb-values(#000)

    --color-gray-light: rgb-values(#fff)
    --color-gray-dark:  rgb-values(#000)
    --color-gray:       color-scale(#968273 inoutsine gamma 1.5)

    --color-blue:   color-scale(#0da6c9 inoutsine gamma 1.2)
    --color-red:    color-scale(#ef4444 inoutsine gamma 1.6)
    --color-green:  color-scale(#84cc16 inoutsine)
    --color-yellow: color-scale(#f9b807 inoutsine gamma 1.7)

    --color-app-bg: var(--color-gray-50)
    --color-app-fg: var(--color-gray-900)

    --color-primary: var(--color-blue-600)
    --color-primary-light: var(--color-blue-400)
    --color-primary-dark: var(--color-blue-700)

    --color-shadow: var(--color-gray-700)
    --default-shadow: rgb(var(--color-shadow) / 0.2)

    --color-btn-default: var(--color-gray-700)
    --color-btn-default-hover: var(--color-gray-800)
    --color-btn-default-text: var(--color-white)

    --color-btn-primary: var(--color-primary)
    --color-btn-primary-hover: var(--color-primary-dark)
    --color-btn-primary-text: var(--color-white)

    --color-btn-danger: var(--color-red-600)
    --color-btn-danger-hover: var(--color-red-800)
    --color-btn-danger-text: var(--color-white)

    --color-hl-yellow: var(--color-yellow-200)
    --color-hl-yellow-dark: var(--color-yellow-500)

  :root.dark
    --color-app-bg: var(--color-gray-50)
    --color-app-fg: var(--color-gray-950)

    --color-gray-light: rgb-values(#000)
    --color-gray-dark:  rgb-values(#fff)
    --color-gray:       color-scale(#6A7E84 reversed inoutsine to #161a1b gamma 1.2)

    --color-blue:   color-scale(#0cabcf reversed inoutsine gamma 1.6)
    --color-red:    color-scale(#ef4444 reversed inoutsine gamma 1.1)
    --color-green:  color-scale(#84cc16 reversed inoutsine gamma 1.1)
    --color-yellow: color-scale(#f9b807 reversed inoutsine gamma 1.1)

    --color-primary: var(--color-blue-600)
    --color-primary-light: var(--color-blue-400)
    --color-primary-dark: var(--color-blue-700)

    --color-shadow: var(--color-black)
    --default-shadow: rgb(var(--color-shadow) / 0.6)

    --color-btn-default: var(--color-gray-400)
    --color-btn-default-hover: var(--color-gray-300)

    --color-btn-primary: var(--color-blue-400)
    --color-btn-primary-hover: var(--color-blue-300)

    --color-btn-danger: var(--color-red-400)
    --color-btn-danger-hover: var(--color-red-300)

    --color-hl-yellow: var(--color-yellow-100)
    --color-hl-yellow-dark: var(--color-yellow-300)
